<template>
  <div>
    <my-dialog title="图片弹窗">
      <template v-slot:content="data">
        {{data}}
        <img src="" />
      </template>
    </my-dialog>
    <my-dialog title="列表弹窗">
      <template v-slot:content>
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
       </template>
    </my-dialog>
    <a-table :columns="columns" :data-source="dataSource" rowKey="id">
      <div slot="action" slot-scope="rowdata">
        <a-button @click="hanldeRemove(rowdata)" >删除</a-button>
        <a-button @click="hanldeEdit(rowdata)" >编辑</a-button>
      </div>
    </a-table>
  </div>
</template>

<script>
import MyDialog from "@/components/Dialog"
import {getShopData, delShop} from "@/api";
export default {
  components:{
    MyDialog
  },
  data(){
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'shopname',
        key: 'shopname',
      },
      {
        title: '商品标题',
        dataIndex: 'subtitle',
        key: 'subtitle',
      },
      {
        title: '商品分类',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '操作',
        key:'option',
        scopedSlots:{
          customRender: 'action'
        }
      }
    ];
    return {
      columns,
      dataSource:[]
    }
  },
  mounted() {
    getShopData().then(res => {
      this.dataSource = res.data;
    })
  },
  methods: {
    hanldeRemove({id}){
      delShop(id).then(res => {
        console.log(res);
      })
    },
    hanldeEdit(){
      console.log('编辑')
    }
  },
}
</script>

<style>

</style>